<!DOCTYPE html>  
<html>
	<head>
		<meta charset="utf-8">
		<title>Forestram</title>
		<script src="./jscripts/jQuery.js"></script>
		<script type="text/javascript" src="./jscripts/jQuery.MouseWheel.js"></script>
		<script type="text/javascript" src="./jscripts/jQuery.Fancybox.js"></script>
		<link rel="stylesheet" type="text/css" href="./styles/jQuery.Fancybox.css" media="screen" />
		<script>
			$(document).ready(function () {
			$("a#register_form").fancybox({
				'overlayOpacity' : 0.2,
				'overlayShow'	: true,
				//'modal': true, hui
				'padding': 0,
				'margin': 0,
				'showCloseButton': true,
				'transitionIn'	: 'fade',
				'transitionOut'	: 'fade'
			});
			$("a#forget_form").fancybox({
				'overlayOpacity' : 0.2,
				'overlayShow'	: true,
				//'modal': true,
				'padding': 0,
				'margin': 0,
				'showCloseButton': true,
				'transitionIn'	: 'fade',
				'transitionOut'	: 'fade'
			});
			
				$("#ayolaid").css({"display": "none"});
				
				$("#login_button").mouseover(function () {
					$("#login_button").css({"background":'#464646'});
				});
				
				$("#login_button").mouseout(function () {
					$("#login_button").css({"background":'#161616'});
				});
				
				$("#login_input").focusin(function () {
					if ($("#login_input").attr("value") == "Имя...")
					{
						$("#login_input").attr("value", "");
						$("#login_input").css({"color": "black"});
					}
				});

				$("#login_input").focusout(function () {
					if ($("#login_input").attr("value") == "")
					{
						$("#login_input").attr("value", "Имя...");
						$("#login_input").css({"color": "#BBBBBB"});
					}
					else $("#login_input").css({"color": "black"});
				});
				
				$("#pass_input").focusin(function () {
					if ($("#pass_input").attr("value") == "...")
					{
						$("#pass_input").attr("value", "");
						$("#pass_input").css({"color": "black"});
					}
				});

				$("#pass_input").focusout(function () {
					if ($("#pass_input").attr("value") == "")
					{
						$("#pass_input").attr("value", "...");
						$("#pass_input").css({"color": "#BBBBBB"});
					}
					else {
						$("#pass_input").css({"color": "black"});
					}
				});
				
			});
		</script>
	</head>
	<body style = "padding 0; margin: 0; color: color: #5F5F5F; font-family: tahoma, arial, verdana, sans-serif, Lucida Sans; font-size: 11px; cursor: default; background: url('./images/main_background.png'); background-repeat: no-repeat; background-position: center;">
<style>
a {text-decoration: none; color: #535353;}
a:hover {text-decoration: underline;}
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  src: local('Poiret One'), local('PoiretOne-Regular'), url('./fonts/poiret_one.woff') format('woff');
}

@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: local('Russo One'), local('RussoOne-Regular'), url('./fonts/russo_one.woff') format('woff');
}

@font-face {
  font-family: 'Istok Web';
  font-style: normal;
  font-weight: 400;
  src: local('Istok Web Regular'), local('IstokWeb-Regular'), url('./fonts/istok_web.woff') format('woff');
}

</style>
		<center>
			<div style = "width: 300px; height: 160px;">
			<div style = "width: 300px; height: 100px;"></div>
			<div style = "width: 300px; height: 40px; font-family: 'Istok Web', sans-serif; text-shadow: 0px 0px 2px #D7FEFF; font-size: 30px; border: 1px solid #E1E1E1; border-style: none none solid none">FORES<span style = "font-family: 'Russo One', sans-serif;"><span style = "color: #005AFF">T</span>RAM</span></div>
			<div style = "width: 300px; height: 18px; font-family: 'Poiret One', cursive; font-size: 18px;">Искусство вдохновляет...</div>
			</div>
			<div style = "width: 500px; height: 20px"></div>
			<div style = "width: 500px; height: 70px; text-align: justify;">Ваше время ограничено, не тратьте его, живя другой жизнью. Не попадайтесь на крючок вероучения, которое существует на мышлении других людей. Не позволяйте взглядам других заглушать свой собственный внутренний голос. И очень важно иметь мужество следовать своему сердцу и интуиции. Они, так или иначе, уже знают, что вы действительно хотите сделать. Все остальное - второстепенно.</div>
			<div style = "width: 500px; height: 30px; font-weight: bold; color: #BBBBBB; text-align: right;">Steve Jobs</div>
			<div style = "width: 500px; height: 50px"></div>
			<div style = "width: 300px; height: 30px">
				<input id = "login_input" style = "width: 300px; height: 20px; color: #BBBBBB; border: 1px solid #BBBBBB; font-family: 'Istok Web', sans-serif; font-size: 20px;" value = "Имя..." type = "text"/>
			</div>
			<div style = "width: 300px; height: 30px">
				<input id = "pass_input" style = "width: 300px; height: 20px; color: #BBBBBB; border: 1px solid #BBBBBB; font-family: 'Istok Web', sans-serif; font-size: 20px;" value = "..." type = "password"/>
			</div>
			<div id = "login_button" style = "width: 300px; height: 30px; line-height: 30px; background: #161616; font-family: 'Istok Web', sans-serif; font-size: 20px; border: 1px solid #BBBBBB; color: #EFEFEF">Вход</div>
			<div style = "width: 300px; height: 20px; font-weight: bold;"><a id = "forget_form" href = "#">Забыли пароль?</a> | <a id = "register_form" href = "#">Регистрация</a></div>
			<div style = "width: 500px; height: 150px"></div>
			<div style = "width: 500px; height: 12px;">Forestram © 2012 | <a href = "#">Русский</a></div>
		</center>
	</body>  
</html> 
